<template>
	<div class="Progress">
		<div class="left">{{transTime(currentTime)}}</div>
		<div class="progressBox" @touchmove="proMove">
			<div class="progresser" :style="{width:percent}">
				<div class="progressBot"></div>
			</div>
		</div>
		<div class="right">{{transTime(currentDuration)}}</div>
	</div>
</template>

<script>
	import api from '../js/api.js'
	import {
		mapState
	} from "vuex";
	export default {
		computed: {
			...mapState([
				'currentTime',
				'currentDuration',
			]),
			percent() {
				return ((this.currentTime / this.currentDuration) * 100) + '%'
			},
		},
		methods: {
			proMove(event){
				let touchPageX = event.changedTouches[0].pageX;
				let selfLeft = event.currentTarget.offsetLeft;
				let selfWidth = event.currentTarget.offsetWidth;
				let percent = (touchPageX-selfLeft)/selfWidth;
				// if(percent > 0.99){
				// 	percent = 0.99
				// }
				this.audio.currentTime = percent*this.currentDuration;
			},
			transTime(time) {
				var duration = parseInt(time);
				var minute = parseInt(duration / 60);
				var sec = duration % 60 + '';
				var isM0 = ':';
				if (minute == 0) {
					minute = '00';
				} else if (minute < 10) {
					minute = '0' + minute;
				}
				if (sec.length == 1) {
					sec = '0' + sec;
				}
				return minute + isM0 + sec
			},
		},
	}
</script>

<style lang="scss" scoped>
	.Progress {
		top: 89%;
		width: 100%;
		height: 10px;
		z-index: 100;
		position: fixed;
		display: flex;
		justify-content: space-between;
		.left {
			width: 10%;
			font-size: 13px;
			margin-top: -1%;
			margin-left: 2%;
		}

		.right {
			width: 10%;
			margin-right: 2%;
			margin-top: -1%;
			font-size: 13px;
		}

		.progressBox {
			left: 13%;
			width: 72%;
			height: 6px;
			z-index: 200;
			position: fixed;
			border-radius: 5px;
			background-color: #FFFFFF;

			.progresser {
				height: 6px;
				position: absolute;
				border-radius: 5px;
				background-color: gray;

				.progressBot {
					width: 9px;
					height: 9px;
					right: -2px;
					top: -1px;
					overflow: hidden;
					position: absolute;
					border-radius: 50%;
					background-color: #000000;
				}
			}
		}
	}
</style>
